<template>
    <div class="v-pd-40">
        <div class="i-layout-page-header">
            <PageHeader title="患者分配" hidden-breadcrumb :tab-list="tabList" :tab-active-key="tabActiveKey" @on-tab-change="handleChangeTab"></PageHeader>
        </div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Form :model="formItem" :label-width="80">
                <row>
                    <Col span="6">
                        <FormItem label="日期">
                            <DatePicker :editable="false" type="daterange" placeholder="创建日期" v-model="formItem.date"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="归属人">
                            <Select v-model="formItem.personnel" multiple :max-tag-count="3">
                                <Option v-for="item in personnelList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="4">
                        <FormItem label="公海用户">
                            <i-switch v-model="formItem.switch" size="large">
                                <span slot="open">On</span>
                                <span slot="close">Off</span>
                            </i-switch>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="来源">
                            <Select v-model="formItem.source" multiple :max-tag-count="3">
                                <Option v-for="item in sourceList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="性别">
                            <RadioGroup v-model="formItem.radio">
                                <Radio label="男">男</Radio>
                                <Radio label="女">女</Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>
                    <Col span="18">
                        <FormItem label="数据状态">
                            <CheckboxGroup v-model="formItem.checkbox">
                                <Checkbox label="全部"></Checkbox>
                                <Checkbox label="初诊"></Checkbox>
                                <Checkbox label="复诊"></Checkbox>
                                <Checkbox label="未及时复诊"></Checkbox>
                                <Checkbox label="抗复发"></Checkbox>
                                <Checkbox label="流失"></Checkbox>
                                <Checkbox label="断诊"></Checkbox>
                            </CheckboxGroup>
                        </FormItem>
                    </Col>
                </row>
                <row>
                    <Col span="12">
                        <FormItem label="标签">
                            <Select v-model="formItem.label" multiple :max-tag-count="5">
                                <Option v-for="item in labelList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="城市">
                            <Select v-model="formItem.city" multiple :max-tag-count="5">
                                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="年龄">
                            <row>
                                <Col span="10">
                                    <Input v-model="formItem.input" placeholder="请输入年龄"></Input>
                                </Col>
                                <Col span="4" style="text-align: center">-</Col>
                                <Col span="10">
                                    <Input v-model="formItem.input1" placeholder="请输入年龄"></Input>
                                </Col>
                            </row>
                        </FormItem>
                    </Col>
                </row>
                <FormItem>
                    <Button style="margin-right: 8px">重置</Button>
                    <Button type="primary">筛选</Button>
                </FormItem>
            </Form>
            <Divider />
            <DescriptionList title="筛选条件" :col="2">
                <Description term="日期：">2019-12-1 ~ 2019-12-30</Description>
                <Description term="来源：">
                    <tag>微信</tag>
                    <tag>抖音</tag>
                </Description>
                <Description term="归属人：">
                    <tag>高玲</tag>
                    <tag>王艳</tag>
                </Description>
                <Description term="性别：">
                    <tag>全部</tag>
                </Description>
                <Description term="数据状态：">
                    <tag>复诊</tag>
                    <tag>未及时就诊</tag>
                </Description>
                <Description term="标签：">
                    <tag>专业</tag>
                    <tag>活动</tag>
                </Description>
                <Description term="城市：">
                    <tag>合肥</tag>
                    <tag>苏州</tag>
                </Description>
                <Description term="年龄：">18 ~ 50</Description>
            </DescriptionList>
            <Divider />
            <DescriptionList title="筛选结果" :col="2">
                <Description term="筛选用户数：">5158</Description>
                <Description term="分配给：">
                    <Select v-model="formItem.personnel1" multiple :max-tag-count="3">
                        <Option v-for="item in personnelList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Description>
            </DescriptionList>
        </Card>
        <FooterToolbar>
            <Button type="primary" :loading="remarksloading" class="v-mt-20" size="large">提交</Button>
        </FooterToolbar>
    </div>
</template>

<script>
import mixin from '../mixins'
export default {
    name: 'patient',
    mixins: [mixin],
    data() {
        return {
            tabActiveKey: 'patient',
            type: [],
            loading: false,
            single: '',
            remarksloading: false,
            formItem: {
                input: '',
                input1: '',
                select: '',
                radio: 'male',
                checkbox: [],
                switch: true,
                source: '',
                date: '',
                personnel: '',
                personnel1: '',
                label: '',
                effect: '',
                risk: '',
                city: '',
                time: ''
            },
            sourceList: [
                {
                    value: '微信',
                    label: '微信'
                },
                {
                    value: '市场转诊',
                    label: '市场转诊'
                },
                {
                    value: '抖音',
                    label: '抖音'
                },
                {
                    value: '门户',
                    label: '门户'
                }
            ],
            personnelList: [
                {
                    value: '王艳',
                    label: '王艳'
                },
                {
                    value: '高玲',
                    label: '高玲'
                },
                {
                    value: '张在峰',
                    label: '张在峰'
                },
                {
                    value: '时宜',
                    label: '时宜'
                }
            ],
            labelList: [
                {
                    value: '专家',
                    label: '专家'
                },
                {
                    value: '费用',
                    label: '费用'
                },
                {
                    value: '敏感',
                    label: '敏感'
                },
                {
                    value: '活动',
                    label: '活动'
                }
            ],
            effectList: [
                {
                    value: '扩散',
                    label: '扩散'
                },
                {
                    value: '无效',
                    label: '无效'
                },
                {
                    value: '见效-10%',
                    label: '见效-10%'
                },
                {
                    value: '见效-50%',
                    label: '见效-50%'
                },
                {
                    value: '治愈-90%',
                    label: '治愈-90%'
                },
                {
                    value: '复发',
                    label: '复发'
                }
            ],
            riskList: [
                {
                    value: '敏感',
                    label: '敏感'
                },
                {
                    value: '正常',
                    label: '正常'
                },
                {
                    value: '黑名单',
                    label: '黑名单'
                },
                {
                    value: '领导介绍',
                    label: '领导介绍'
                }
            ],
            cityList: [
                {
                    value: '合肥',
                    label: '合肥'
                },
                {
                    value: '长沙',
                    label: '长沙'
                },
                {
                    value: '苏州',
                    label: '苏州'
                },
                {
                    value: '六安',
                    label: '六安'
                }
            ]
        }
    }
}
</script>

<style scoped>
.v-pd-40 {
    padding-bottom: 40px;
}
</style>
